<template>
    <div id='nbrtext'>
        <input v-model="name" type="text" placeholder="请输入名字" />
        <div v-for="(item,i) in textList" :key="item.time" >
            <div>{{item.name}}:</div>
            <div class='text'>{{item.text}}</div>
        </div>
    </div>
    <div id='nbrwrit'>
        <textarea id='sendinput' v-model="text" />
        <button @click="send()" id='sendbtn'>发送</button>
    </div>
</template>

<script>
    import {ref, reactive } from "vue";
    export default {
      name: 'NoBodyRoom',
      components: {
        },
        setup(){
            let textList = reactive([])
            let text = ref('')
            let name = ref('')
            let webSocketObj = reactive({})
            let here = ref(true)
            let heartCheck  = reactive({})
            let onMessageTime = ref(0)
            return{
                text,
                name,
                textList,
                webSocketObj,
                here,
                heartCheck,
                onMessageTime
            }
        },
        mounted(){
            pxmu.loading({
                msg: '正在连接', //loading信息 为空时不显示文本
                close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                inscroll: true, //模态 不可点击和滚动
            })
            this.here = true
            this.webSocketInit()
        },
        beforeUnmount() {
            this.here = false
            clearInterval(this.heartCheck)
            this.webSocketObj = {}
        },
      methods: {
        webSocketInit(){
            console.log(this.wsurl)
            this.webSocketObj = new WebSocket(
                this.wsurl+"/nobodyws"
                )
            this.webSocketObj.onmessage = this.onMessage
            this.webSocketObj.onopen = this.onOpen
            this.webSocketObj.onerror = this.onError
            this.webSocketObj.onclose = this.onClose
        },
        async send() {
            if (this.name === '') {
                pxmu.toast('请输入名字')
                return
            }
            if (this.text === '') {
                pxmu.toast('请输入文字')
                return
            }
            let res = await this.axios.post("/nobodysay",{
                'name':this.name,
                'text':this.text
            })
            if (res.data === 200) {
                this.text = ''
            }
        },
        onOpen() {
            if (this.webSocketObj.readyState === 1) {
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                pxmu.toast('连接成功')
                if (!this.onMessageTime) {
                    this.onMessageTime = 0
                }
                this.getHistory()
                //- readyState 等于1 的时候建立链接成功
                let that = this
                this.heartCheck = setInterval(function(){
                    console.log('heartCheck')
                    that.webSocketObj.send('heartCheck')
                },30000)
            }
        },
        onMessage(evt) {
            this.onMessageTime = Date.now()
            var received_msg = evt && JSON.parse(evt.data);
            this.textList.push(received_msg)
            console.log(received_msg)
            console.log(this.textList)
            setTimeout(()=>{
                var element = document.documentElement
                element.scrollTop += (this.textList.length*50)
            },1000)
        },
        onError() {
            this.tipswin.error('链接失败',1000)
            clearInterval(this.heartCheck)
            if (this.here) {
                pxmu.loading({
                    msg: '正在连接', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                this.onOpen()
            }
        },
        onClose() {
            this.tipswin.error('断开连接',1000)
            clearInterval(this.heartCheck)
            this.webSocketObj && this.webSocketObj.close && this.webSocketObj.close()
            if (this.here) {
                pxmu.loading({
                    msg: '正在连接', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                this.webSocketInit()
            }
        },
        async getHistory(){
            let res = await this.axios.post("/nobodysayhistory",{
                'time':this.onMessageTime
            })
            if (res.data.length > 0) {
                for (let index = 0; index < res.data.length; index++) {
                    const element = res.data[index];
                    this.textList.push(element)
                }
            }
            this.onMessageTime = Date.now()
        }
      }
    }
</script>
<style>
#nbrtext {
    background-color: cornsilk;
    margin-bottom: 6em;
}

#nbrwrit {
    margin: 0em;
    height: 6em;
    width: 100%;
    background-color: whitesmoke;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
}

#sendbtn {
    width: 20%;
}

#sendinput {
    width: 80%;
}

.text {
    margin-left: 2em;
}
</style>